<template>
    <div>
        <div class="menuDescriptionBox">
            <i class="fa fa-question-circle-o fa-lg"></i> <span class="menuDescTitle">基本信息说明：</span>
            <div class="menuDesc">该板块中详细展示您当前应用的信息，以及您应用使用配额的情况，以便用户即时知道当前应用的使用情况</div>
        </div>
        <div class="applicationBaseInfoTitle">基本信息</div>
        <div class="applicationBaseInfoBox">
            <div class="applicationBaseInfoItem">
                <div class="applicationBaseInfoItem_name">应用名称：</div>
                <div class="applicationBaseInfoItem_content">{{applicationDetailData.applicationDetail.cma_name}}</div>
            </div>
            <div class="applicationBaseInfoItem">
                <div class="applicationBaseInfoItem_name">应用AppKey：</div>
                <div class="applicationBaseInfoItem_content">{{applicationDetailData.applicationDetail.cma_app_key}}</div>
            </div>
            <div class="applicationBaseInfoItem">
                <div class="applicationBaseInfoItem_name">应用AppSecret：</div>
                <div class="applicationBaseInfoItem_content">{{applicationDetailData.applicationDetail.cma_app_secret}}</div>
            </div>
            <div class="applicationBaseInfoItem">
                <div class="applicationBaseInfoItem_name">应用描述：</div>
                <div class="applicationBaseInfoItem_content">{{applicationDetailData.applicationDetail.cma_describe}}</div>
            </div>
            <div class="applicationBaseInfoItem">
                <div class="applicationBaseInfoItem_name">应用类型：</div>
                <div class="applicationBaseInfoItem_content" v-if="applicationDetailData.applicationDetail.cma_type == '0'">内容管理系统</div>
            </div>
            <div class="applicationBaseInfoItem" style="border:none">
                <div class="applicationBaseInfoItem_name">创建时间：</div>
                <div class="applicationBaseInfoItem_content">{{$common.dateFormat("YYYY/MM/dd hh:mm",applicationDetailData.applicationDetail.cma_create_time)}}</div>
            </div>
        </div>
        <div class="applicationBaseInfoTitle">配额信息</div>
        <div class="applicationBaseInfoBox">
            <div class="applicationBaseInfoItem">
                <div class="applicationBaseInfoItem_name">当前已使用 / 数据库最大数据上限：</div>
                <div class="applicationBaseInfoItem_content">{{applicationDetailData.applicationQuota.ccaq_db_used_size}}M / {{applicationDetailData.applicationQuota.ccaq_db_max_size}}M</div>
                <div class="applicationBaseInfoItem_progress">
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
                </div>
            </div>
            <div class="applicationBaseInfoItem">
                <div class="applicationBaseInfoItem_name">当前已使用 / 图库最大保存数：</div>
                <div class="applicationBaseInfoItem_content">{{applicationDetailData.applicationQuota.ccaq_image_used_count}}张 / {{applicationDetailData.applicationQuota.ccaq_image_max_count}}张</div>
                <div class="applicationBaseInfoItem_progress">
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="10"></el-progress>
                </div>
            </div>
            <div class="applicationBaseInfoItem">
                <div class="applicationBaseInfoItem_name">当前已使用 / 后台管理人员数上限：</div>
                <div class="applicationBaseInfoItem_content">{{applicationDetailData.applicationQuota.ccaq_admin_used_count}}人 / {{applicationDetailData.applicationQuota.ccaq_admin_max_count}}人</div>
                <div class="applicationBaseInfoItem_progress">
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="20"></el-progress>
                </div>
            </div>
            <div class="applicationBaseInfoItem" style="border:none;">
                <div class="applicationBaseInfoItem_name">当前已使用 / 下载库文件最大上限数：</div>
                <div class="applicationBaseInfoItem_content">{{applicationDetailData.applicationQuota.ccaq_download_used_count}}个 / {{applicationDetailData.applicationQuota.ccaq_download_max_count}}个</div>
                <div class="applicationBaseInfoItem_progress">
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="30"></el-progress>
                </div>
            </div>
            <div class="applicationBaseInfoItem" v-if="isPromptUpdateQuota" style="border:none;color:red;">
                <div>您已有项目达到配额上限，可能影响到您的正常使用，您可以进行升配操作</div>
                <div class="applicationBaseInfoItem_btn"><el-button size="mini" type="success">立即升配</el-button></div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {

            }
        },
        //初始化函数
        mounted() {
            this.initData();
        },
        //计算属性
        computed: {
            ...mapState({
                 applicationDetailData : state => state.ApplicationBasicInfoModule.applicationDetailData
            }),

            //判断是否需要进行升配操作
            isPromptUpdateQuota(){

                var isUpdateQuota = false;

                if(parseFloat(this.applicationDetailData.applicationQuota.ccaq_db_used_size) >= parseFloat(this.applicationDetailData.applicationQuota.ccaq_db_max_size)){
                    isUpdateQuota = true;
                }

                if(parseFloat(this.applicationDetailData.applicationQuota.ccaq_image_used_count) >= parseFloat(this.applicationDetailData.applicationQuota.ccaq_image_max_count)){
                    isUpdateQuota = true;
                }

                if(parseFloat(this.applicationDetailData.applicationQuota.ccaq_admin_used_count) >= parseFloat(this.applicationDetailData.applicationQuota.ccaq_admin_max_count)){
                    isUpdateQuota = true;
                }

                if(parseFloat(this.applicationDetailData.applicationQuota.ccaq_download_used_count) >= parseFloat(this.applicationDetailData.applicationQuota.ccaq_download_max_count)){
                    isUpdateQuota = true;
                }

                return isUpdateQuota;

            }
        },
        //组件方法
        methods: {
            initData(){
                this.$myLoading.startLoading()
                this.$http.getHttp(
                    this.$API.userGetApplicationDetail + "/appid/" + this.$route.query.appid,
                    rs => {
                        console.log(rs);
                        this.$store.commit('ApplicationBasicInfoModule/updateApplicationDetailData',rs)
                        this.$myLoading.endLoading()
                    }
                )
                
            }
        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
.applicationBaseInfoTitle {
    width 100%
    height 40px
    line-height 40px
    padding-left 10px
    background #eee
    font-size 14px
    box-sizing border-box
    margin-bottom 10px
}
.applicationBaseInfoBox {
    width 100%
    height auto
    padding 5px
    box-sizing border-box

    .applicationBaseInfoItem {
        width 100%
        height auto  
        font-size 14px
        margin-bottom 10px
        border-bottom 1px solid #eee
        padding-bottom 10px

        .applicationBaseInfoItem_btn {
            margin-top 10px    
        }

        .applicationBaseInfoItem_name {
            width 100%
            height auto   
            font-weight bold
        }

        .applicationBaseInfoItem_content {
            width 100%
            height auto
            margin-top 7px    
        }

        .applicationBaseInfoItem_progress {
            margin-top 5px
        }
    }
}
</style>